<template>
  <div>
    <ComDialog
      width="600px"
      @EventClose="closeFn"
      :dialogVisible="dialogVisible"
      title="新增文件夹"
    >
      <el-form
        ref="addForm"
        :rules="addFormFules"
        label-width="130px"
        :model="addForm"
      >
        <el-form-item prop="name" label="请输入文件名称">
          <el-input v-model="addForm.name"></el-input>
        </el-form-item>
        <el-form label="请上传图片">
          <div class="upload">
            <el-upload
              ref="upload"
              :on-exceed="exceed"
              :multiple="false"
              @change="beforeFn"
              action="#"
              :http-request="uploadFn"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
              :on-change="beforeFn"
              :limit="1"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
          </div>
        </el-form>
        <el-form-item>
          <el-button @click="closeFn">取消</el-button>
          <el-button type="primary" @click="addFn"> 添加</el-button>
        </el-form-item>
      </el-form>
    </ComDialog>
  </div>
</template>

<script>
import ComDialog from "../../../components/comDialog.vue";
export default {
  components: { ComDialog },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      dialogImageUrl: "",
      // 添加数据
      addForm: { name: "", type: "2", filename: "", base64: "" },
      //   添加规则
      addFormFules: {
        name: [{ required: true, message: "不可以为空哦", trigger: "blur" }],
      },
    };
  },
  methods: {
    // 超出钩子
    exceed() {
      console.log("chufale");
      this.$modal.msg("只可以上传一张封面");
    },
    beforeFn(file) {
      console.log(file);
      this.addForm.filename = file.name;
      // let blod = new Blob([file]);
      let fileReader = new FileReader();
      fileReader.readAsDataURL(file.raw);
      fileReader.onload = (e) => {
        this.addForm.base64 = e.target.result.split(",")[1];
      };
    },
    handlePictureCardPreview() {},
    handleRemove() {},
    // 上传视频封面
    uploadFn() {},
    //   添加
    async addFn() {
      try {
        await this.$refs.addForm.validate();
        this.addForm.path = this.addForm.name;
        this.$emit("EventSave", this.addForm);
      } catch (error) {
        this.$modal.msgWarning("不可以为空哦");
      }
    },
    // 关闭对话框
    closeFn() {
      this.addForm = { name: "", type: "2", filename: "", base64: "" };
      // 情况文件夹列表
      this.$refs.upload.clearFiles();
      this.$emit("update:dialogVisible", false);
    },
  },
};
</script>

<style scoped>
.upload {
  margin-left: 130px;
  margin-bottom: 20px;
}
</style>